<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>canvas API</title>

</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
    /**
     *  canvas = document.createElement('canvas');
     *  getContext
     *  toDataURL
     */


/*


// ctx = canvas.getContext("2d");
//fillRect(x,y,width,height) : 画一个填充矩形
//strokeRect(x,y,width,height) :  画一个线框矩形
//clearRect(x,y,width,height) : 清除一个特殊的区域
//beginPath() 路径起始
//closePath()  关闭路径，不是必须
//stroke()  以线填充路径
//fill()  以实心图形填充路径
//moveTo(x, y) 移动画笔位置
//lineTo(x, y) 绘制直线，起始坐标位于前一路径、或是moveTo设置
//arc(x, y, radius, startAngle, endAngle, anticlockwise)  绘制弧线或是圆
//      五个参数：x，y 是圆心坐标，radius 是半径，startAngle 和 endAngle 分别是起末弧度（以 x 轴为基准），
//      anticlockwise 为 true 表示逆时针，反之顺时针。
//      注意：arc 方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees;。
//quadraticCurveTo(cp1x, cp1y, x, y) //  二次方贝塞尔曲线 ，cp1x, cp1y为控制点， x, y为终点，起点是之前的那个点。
//bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)   三次方贝塞尔曲线
//drawImage(image, x, y) Image对象或canvas对象，x,y坐标，
//drawImage(image, x, y, width, height)
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) sx,sy切图起始坐标 sw,sh切图大小
//fillStyle = color    颜色值为css3允许格式
//strokeStyle = color  线的颜色
//lineWidth = value  数字
//lineCap = type
// 默认的 butt 。可以注意到它是与辅助线齐平的。
// 中间的是 round 的效果，端点处加上了半径为一半线宽的半圆。
// 右边的是 square 的效果，端点出加上了等宽且高度为一半线宽的方块
//lineJoin = type  三种之一：round, bevel 和 miter。默认是 miter。
//miterLimit = value
//globalAlpha = transparency value
//lingrad=createLinearGradient(x1,y1,x2,y2) 接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
// lingrad.addColorStop(0, '#00ABEB');
//           lingrad.addColorStop(1, '#000');
//       ctx.fillStyle=lingrad;
//createRadialGradient(x1,y1,r1,x2,y2,r2)  前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
//createPattern(image,type)该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat
//shadowOffsetX = float 阴影
//shadowOffsetY = float
//shadowBlur = float 模糊度
//shadowColor = color
//save() save 和 restore 方法是用来保存和恢复 canvas 状态的
//restore()  就是保存当前的设置，颜色，透明度，位置等等
//translate(x, y) x 是左右偏移量，y 是上下偏移量
//rotate(angle)  旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。 会有50像素？？
//scale(x, y)
//transform(m11, m12, m21, m22, dx, dy)
//globalCompositeOperation = type
// source-over 这是默认设置，新图形会覆盖在原有内容之上。 destination-over  会在原有内容之下绘制新图形。
//source-in 新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。destination-in 原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。
//source-out 结果是只有新图形中与原有内容不重叠的部分会被绘制出来。destination-out 原有内容中与新图形不重叠的部分会被保留。
//source-atop 新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。destination-atop 原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形
//lighter 两图形中重叠部分作加色处理。 darker 两图形中重叠的部分作减色处理。
//xor 重叠的部分会变成透明。 copy 只有新图形会被保留，其它都被清除掉。
//clip() 裁剪路径，让以后画的图都在该路径下
//createImageData(sw, sh) createImageData(imagedata)
//getImageData(sx, sy, sw, sh)
//putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])
//imagedata.width
//imagedata.height
//返回ImageData对象数据的实际尺寸，该值为设备像素值（Device Pixel）。
//imagedata.data
//返回一个一维数组，该数组包含按照RGBA顺序排列的范围从0到255的数据
//font：文字字体，同 CSS font 属性
textAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic.
 fillText(string, x,  y);在x,y位置填充字符串
 */
    
    var c=(function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");


          ctx.beginPath();
          ctx.moveTo(75,10);
          ctx.quadraticCurveTo(0,-20,75,70);
          ctx.quadraticCurveTo(150,-20,75,10);
         // ctx.bezierCurveTo(75,-10,-20,0,75,75);
         // ctx.bezierCurveTo(170,-20,75,0,75,10);
          ctx.lineWidth=5;
          ctx.lineCap='butt';
          ctx.lineJoin='bevel';
          ctx.lineTo(50,50);
          ctx.stroke();

          var lingrad = ctx.createLinearGradient(10,10,10,70);
              lingrad.addColorStop(0, '#00ABEB');
              lingrad.addColorStop(1, '#000');
         ctx.fillStyle=lingrad;
         ctx.strokeStyle=lingrad;
console.dir(ctx);
          // draw shapes
          ctx.strokeRect(10,10,50,50);
          ctx.strokeRect(70,10,50,50);
           var radgrad = ctx.createRadialGradient(45,45,10,45,25,30);
            radgrad.addColorStop(0, '#00baff');
            radgrad.addColorStop(0.9, '#fff');

                  ctx.fillStyle = radgrad;
            ctx.fillRect(0,0,150,150);
                  ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
            ctx.shadowBlur = 5;
            ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

            ctx.font = "20px Times New Roman";
            ctx.fillStyle = "Black";
            ctx.fillText("Sample String", 5, 30);
                   ctx.fillRect(0,0,150,150);   // Draw a rectangle with default settings
            ctx.save();                  // Save the default state

            ctx.fillStyle = '#09F'       // Make changes to the settings
            ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings

            ctx.save();                  // Save the current state
            ctx.fillStyle = '#FFF'       // Make changes to the settings
            ctx.globalAlpha = 0.5;
            ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings

            ctx.restore();               // Restore previous state
            ctx.fillRect(45,45,60,60);   // Draw a rectangle with restored settings

            ctx.restore();               // Restore original state
            ctx.fillRect(60,60,30,30);   // Draw a rectangle with restored settings
      }

         ctx.strokeStyle = "#9CFF00";
        ctx.strokeRect(0,0,100,100);

        ctx.translate(0,0);
       //ctx.scale(2,1)
         ctx.strokeRect(50,50,50,50);
ctx.moveTo(150,150);
ctx.quadraticCurveTo(150,200,200,200);
ctx.stroke();
       var imgdata = ctx.getImageData(0,0,100,100);
        for (var i = 0,n = imgdata.data.length;  i <n; i += 4) {
            var grayVal = (imgdata.data[i  ]+imgdata.data[i+1  ]+imgdata.data[i +2 ])/3 ;
  imgdata.data[i  ] = grayVal; // red channel
              imgdata.data[i+1  ] =grayVal; // red channel
              imgdata.data[i+2  ] = grayVal; // red channel
  //imgdata.data[i+3] = 255; // alpha channel

}
        ctx.putImageData(imgdata, 200,200);

        var img=document.createElement('img');
                    img.src=canvas.toDataURL();
                    document.body.appendChild(img);
var imgd = ctx.createImageData(40,50);
var pix = imgd.data;
// Loop over each pixel 和 set a transparent red.

for (var i = 0,n = pix.length;  i <n; i += 4) {
  pix[i  ] = 255; // red channel
  pix[i+3] = 255; // alpha channel
}
// Draw the ImageData object at the given (x,y) coordinates.
ctx.putImageData(imgd, 0,0);

        return ctx;
    })();

function drawSpirograph(ctx,R,r,O){
  var x1 = R-O;
  var y1 = 0;
  var i  = 1;
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  do {
    if (i>20000) break;
    var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
    var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
    ctx.lineTo(x2,y2);
    x1 = x2;
    y1 = y2;
    i++;
  } while (x2 != R-O && y2 != 0 );
  ctx.stroke();
}
</script>
</body>
</html>